<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        @import url("search.css");
    </style>
    <script type="module">
        // 购物车工具（纯本地）
        const CART_KEY = 'myCart';
        function getCart() { try { return JSON.parse(localStorage.getItem(CART_KEY)) || []; } catch { return []; } }
        function addCartItem(item) { const list = getCart(); list.push(item); localStorage.setItem(CART_KEY, JSON.stringify(list)); }

        // 唯一弹框函数（带图片参数）
        window.addCart = function (id, name, price, img) {
            addCartItem({ id, name, price, img: img || 'placeholder-封面', qty: 1 });
            alert('已加入购物车！');
            renderCart(); // 刷新主页可视化
        };

        // 读本地 + 渲染（不计算价格）
        function renderCart() {
            const list = getCart();
            const box = document.getElementById('cartView');
            if (!list.length) {
                box.innerHTML = '<div style="text-align:center;color:#666;">购物车是空的</div>';
                return;
            }
            box.innerHTML = list.map(item => `
      <div class="card" style="margin:10px 0;padding:10px;display:flex;align-items:center;gap:10px;">
        <img src="${item.img}" style="width:60px;height:90px;object-fit:cover;">
        <div>
          <div style="font-weight:bold;">${item.name}</div>
          <div style="color:#666;">单价：￥${item.price.toFixed(2)} | 数量：${item.qty}</div>
        </div>
      </div>
    `).join('');
        }

        // 首次加载
        renderCart();
    </script>
</head>

<body>
    <div class="container">
        <h1>搜索结果</h1>

        <!-- 搜索结果：红岩 -->
        <div class="section">
            <div class="book-item">
                <img class="book-cover" src="C:\Users\dante\Pictures\Screenshots\new2.webp" alt="红岩">
                <div class="book-info">
                    <h6>红岩</h6>
                    <p>作者：罗广斌</p>
                    <button class="btn-sm"
                        onclick="addCart(2,'红岩',59.0,'C:\\Users\\dante\\Pictures\\Screenshots\\new2.webp')">加入购物车</button>
                </div>
            </div>
        </div>

        <!-- 推荐书籍：四本横排，无按钮 -->
        <div class="section">
            <h2>推荐书籍</h2>
            <div class="book-list">
                <div class="book-item">
                    <img class="book-cover" src="C:\Users\dante\Pictures\\Screenshots\\new1.webp" alt="了不起的盖茨比">
                    <div class="book-info">
                        <h6>了不起的盖茨比</h6>
                        <p>菲茨杰拉德</p>
                    </div>
                </div>
                <div class="book-item">
                    <img class="book-cover" src="C:\Users\dante\\Pictures\\Screenshots\\new3.webp" alt="茶花女">
                    <div class="book-info">
                        <h6>茶花女</h6>
                        <p>小仲马</p>
                    </div>
                </div>
                <div class="book-item">
                    <img class="book-cover" src="C:\Users\\dante\\Pictures\\Screenshots\\new4.webp" alt="骆驼祥子">
                    <div class="book-info">
                        <h6>骆驼祥子</h6>
                        <p>老舍</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 返回按钮 -->
        <div class="back-btn">
            <button onclick="location.href='index.html'">返回主页</button>
        </div>
    </div>


</body>

</html>